<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的家乡 - [家乡名称]</title>
    <style>
        /* 整体页面基础样式 */
        body {
            font-family: 'SimHei', 'STHeiti', 'Microsoft YaHei', sans-serif; /* 优先使用中文字体 */
            background-color: #f0f0f0; /* 类似宣纸的淡灰色背景 */
            color: #333;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #8b4513; /* 古铜色背景，体现传统韵味 */
            text-align: center;
            padding: 30px 0;
        }

        header h1 {
            font-size: 40px;
            color: white;
            margin: 0;
            font-weight: bold;
            letter-spacing: 2px; /* 适当增加字间距，更具古风 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 文字阴影，增加立体感 */
        }

        /* 导航栏样式 */
        nav {
            background-color: #a0522d; /* 偏深一点的古铜色 */
            text-align: center;
            padding: 15px 0;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline-block;
            margin: 0 20px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 20px;
            padding: 8px 15px;
            border-radius: 5px;
            transition: all 0.3s ease; /* 鼠标悬停过渡效果 */
        }

        nav ul li a:hover {
            background-color: #8b4513; /* 悬停时颜色变化 */
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 悬停时阴影效果 */
        }

        /* 内容区域通用样式 */
       .content-section {
            max-width: 800px;
            margin: 40px auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 内容区域阴影，增加层次感 */
        }

        h2 {
            font-size: 30px;
            color: #8b4513; /* 标题颜色与整体风格呼应 */
            border-bottom: 2px solid #8b4513; /* 标题下边框，传统排版风格 */
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        p {
            text-indent: 2em; /* 段落首行缩进，符合中文传统排版习惯 */
            line-height: 1.8;
            margin-bottom: 20px;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto 20px; /* 图片居中显示且下方留间距 */
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 图片阴影，更显精致 */
        }

        /* 页脚样式 */
        footer {
            background-color: #8b4513;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 40px;
        }
    </style>
</head>

<body>
    <header>
        <h1>我的家乡 - [定州]</h1>
    </header>
    <nav>
        <ul>
            <li>家乡概况</li>
            <li>山川美景</li>
            <li>特色美食</li>
            <li>民俗文化</li>
        </ul>
    </nav>
    <section id="intro" class="content-section">
        <h2>家乡概况</h2>
        <p>
          定州，地处河北，是一座底蕴深厚的千年古城。这里有雄伟的开元寺塔，精美的缂丝制品，鲜香的定州焖子，承载着中山文化，处处散发着迷人魅力，值得探寻。
        </p >
    </section>
    <section id="scenery" class="content-section">
        <h2>山川美景</h2>
        <img src="img/中华第一塔.png" alt="中华第一塔">
        <p>
            定州塔，即开元寺塔，屹立河北定州。八角形楼阁式，高大雄伟，工艺精湛，承载千年历史，是古城璀璨的地标建筑。
        </p >
    </section>
    <section id="food" class="content-section">
        <h2>特色美食</h2>
        <img src="img/view.jpg" alt="家乡美食图">
        <p>
           定州美食丰富多样，有焖子、手掰肠、驴肉火烧、豆腐脑、缸炉烧饼等，口感独特，令人回味无穷.
        </p >
    </section>
    <section id="culture" class="content-section">
        <h2>民俗文化</h2>
        <p>
           定州民俗文化底蕴深厚，极富韵味。逢年过节，花会表演热闹非凡，舞龙舞狮、踩高跷精彩纷呈。剪纸艺术巧夺天工，花鸟人物栩栩如生。还有古朴庄重的祭祖仪式，代代传承，尽显这座古城独特的民俗风情。
        </p >
    </section>
    <footer>
        &copy; [版权年份] 我的家乡
    </footer>
</body>

</html>